<template>
  <li>
    <span @click="toggleSelect(item)">{{ item.name }}</span>
    <ul v-if="item.type === 'directory'">
      <DirectoryItem v-for="child in item.children" :key="child.name" :item="child" @select-file="$emit('select-file', $event)" />
    </ul>
  </li>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    toggleSelect(item) {
      if (item.type === 'file') {
        this.$emit('select-file', item);
      }
    }
  }
};
</script>